<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            display: flex;
            justify-content: space-between;
        }
        img{
           height: 50px;
           border-radius: 25px;
           
            width: 50px;
        }
        input{
            width: 400px;
            height: 50px;
            transition: all 0.7s;
        }
        span{
            float:left;            
            transition: all 0.7s;
        }
        input:focus{
            height: 100px;
        }
       
    </style>
</head>
<body>

    <div class="box">
         <img src="./相册.jpg/images/course01.png" alt="">
         <input type="text" maxlength="200"  placeholder="发布">
         <button>发布</button>
    </div>
     <span>0/200字</span>
     <script>
        const  input=document.querySelector('input')
        const span=document.querySelector('span')
        input.addEventListener('input',function(){
            span.innerHTML=`${input.value.length}/200字`
            input.addEventListener('focus',function(){
                span.style.opacity=1
            })
            input.addEventListener('blur',function(){
                span.style.opacity=0
            })
        })





     </script>
   
   
</body>
</html>